<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-lg-4">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right text-right">
                        <p class="h6 text-white m-t-0">商品总数</p>
                        <p class="h3 text-white m-b-0" id="product-sum-display">0</p>
                    </div>
                    <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent">
                        <i class="mdi mdi-clipboard fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right text-right">
                        <p class="h6 text-white m-t-0">店铺</p>
                        <p class="h3 text-white m-b-0" id="store-name-display"
                           style="width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">店铺名</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-store fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right text-right">
                        <p class="h6 text-white m-t-0">当前用户</p>
                        <p class="h3 text-white m-b-0" id="user-name-display"
                           style="width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">用户名</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-account fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="product-list-div">
        <div class="col-lg-12">
            <div>
                <div class="card col-md-12">
                    <div class="card-header">
                        <h4 style="font-size: 20px">商品概览</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="col-sm-1 col-xs-12">#</th>
                                    <th class="col-sm-5 col-xs-12">商品名称</th>
                                    <th class="col-sm-2 col-xs-12">单价</th>
                                    <th class="col-sm-2 col-xs-12">状态</th>
                                    <th class="col-sm-2 col-xs-12">操作</th>
                                </tr>
                                </thead>
                                <tbody id="product-list-body">
                                <tr>
                                    <td>没有信息</td>
                                    <td>没有信息</td>
                                    <td>没有信息</td>
                                    <td>没有信息</td>
                                    <td>没有信息</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="order-list-div">
        <div class="col-lg-12">
            <div>
                <div class="card col-md-12">
                    <div class="wappper">
                        <div class="card-header">
                            <h4 style="font-size: 20px">订单概览</h4>
                        </div>
                        <div id="order-list-body">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(document).ready(function () {
        var htmlString = "";
        var data = product_seller_list(localStorage.getItem("token"), 0);
        for (let i = 0; i < data.products.length; i++) {
            htmlString += "<tr><td style='line-height: 30px'>" + (1 + i) + "</td>" +
                "<td style='line-height: 30px'><div style='width: 450px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>" + data.products[i].title + "</div></td>" +
                "<td style='line-height: 30px'>￥" + data.products[i].price.toFixed(2) + "</td>" +
                "<td style='line-height: 30px'>" + trans_to_span(data.products[i].status) + "</td>" +
                "<td><a class='mdi mdi-settings' style='cursor: pointer;font-size: 20px'  title='管理' onclick='product_detail_page(" + data.products[i].productId + ")'></a>" +
                "<a class='mdi mdi-publish' style='cursor: pointer;font-size: 20px' title='升级VIP' onclick='product_vip_page(" + data.products[i].productId + ")'></a>" +
                ((data.products[i].status >= 1 && data.products[i].status <= 4) ? "<a class='mdi mdi-delete' style='cursor: pointer;font-size: 20px' title='停售' onclick='product_seller_delete(" + data.products[i].productId + ")'></a>" : "<a class='mdi mdi-briefcase-upload' style='cursor: pointer;font-size: 20px' title='重新上架' onclick='product_seller_reshelve(" + data.products[i].productId + ")'></a>") +
                "</td></tr>";
        }
        document.getElementById("store-name-display").innerHTML = this_store_name;
        document.getElementById("user-name-display").innerHTML = this_user_name;
        document.getElementById("product-sum-display").innerHTML = data.total;
        document.getElementById("product-list-body").innerHTML = htmlString;
    })

    $(document).ready(function () {
        var page=1;
        var htmlString = "";
        var data = order_seller_list(localStorage.getItem("token"), page - 1);
        for (let orderIndex = 0; orderIndex < data.orderList.length; orderIndex++) {
            var order = data.orderList[orderIndex];
            var status = order.status;
            var orderId = order.orderId;
            var createTime = order.createTime;
            var actualPrice = order.actualPrice;
            var ifNotAllRefund = false;

            htmlString += '<div class="panel panel-info">\n' +
                '                        <div class="panel-heading" role="tab" id="' + "heading" + orderId + '">\n' +
                '                            <h4 class="panel-title">\n' +
                '                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"\n' +
                '                                   href="#' + "collapse" + orderId + '" aria-expanded="false" aria-controls="' + "collapse" + orderId + '">\n' +
                '                                    <div style="display: flex;justify-content:space-evenly">\n' +
                '                                        <div class="text-left">订单编码：' + orderId + '</div>\n' +
                '                                        <div class="text-left">订单状态：' + trans_to_order_status_span(status) + '</div>' +
                '                                        <div class="text-left">创建时间：' + createTime + '</div>\n' +
                '                                        <div class="text-left">总价格：￥' + actualPrice.toFixed(2) + '</div>\n' +
                '                                    </div>\n' +
                '                                </a>\n' +
                '                            </h4>\n' +
                '                        </div>\n' +
                '                        <div id="' + "collapse" + orderId + '" class="panel-collapse collapse" role="tabpanel"\n' +
                '                             aria-labelledby="' + "heading" + orderId + '">\n' +
                '                            <div class="panel-body">\n' +
                '                                <table>\n' +
                '                                    <thead>\n' +
                '                                    <tr class="row">\n' +
                '                                        <th class="col-md-1 text-center">\n' +
                '                                            商品图片\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-1 text-center">\n' +
                '                                            商品编号\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-5 text-left">\n' +
                '                                            商品标题\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-3 text-left">\n' +
                '                                            商品数量\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-2 text-left">\n' +
                '                                            商品状态\n' +
                '                                        </th>\n' +
                '                                    </tr>\n' +
                '                                    </thead>\n' +
                '                                    <tbody class="two_two">';
            for (let productIndex = 0; productIndex < order.productList.length; productIndex++) {
                var p = order.productList[productIndex];
                if (p.status === 1) {
                    ifNotAllRefund = true;
                }
                htmlString += '<tr class="row">\n' +
                    '                                        <td class="col-md-1 text-center">\n' +
                    '                                            <img src="' + p.filePath + '"\n' +
                    '                                                 style="height: 80px;width: 80px">\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-1 text-center">\n' +
                    '                                            <span style="line-height: 80px">' + p.productId + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-5 text-left">\n' +
                    '                                            <span>' + p.title + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-3 text-left">\n' +
                    '                                            <span style="line-height: 80px">' + p.number + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-2 text-left">' + trans_to_order_good_status_span(p.status) +
                    '                                        </td>\n' +
                    '                                    </tr>';
            }
            htmlString += "</tbody>\n" +
                "                                </table>\n";
            if ((status === 2) && (ifNotAllRefund)) {
                htmlString += "<div class=\"text-center\">\n" +
                    "                                    <button class=\"btn btn-success\" onclick='order_seller_deliver(" + orderId + ")'>发货</button>\n" +
                    "                                </div>";
            }
            htmlString += "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>";
        }
        document.getElementById("order-list-body").innerHTML = htmlString;
    })


    function trans_to_span(status_code) {
        if (status_code === 0) {
            return '<span class="label label-dark">停售中</span>';
        } else if (status_code === 1) {
            return '<span class="label label-primary">售卖中</span>';
        } else if (status_code === 2) {
            return '<span class="label label-yellow">普通VIP</span>';
        } else if (status_code === 3) {
            return '<span class="label label-yellow">超级VVIP</span>';
        } else if (status_code === 4) {
            return '<span class="label label-yellow">至尊VVVIP</span>';
        } else {
            return '<span class="label label-danger">状态异常</span>';
        }
    }

    function trans_to_order_status_span(num) {
        if (num === 0) {
            return "<span class=\"label label-cyan\">订单已完成</span>";
        } else if (num === 1) {
            return "<span class=\"label label-warning\">订单未支付</span>";
        } else if (num === 2) {
            return "<span class=\"label label-primary\">已支付</span>";
        } else if (num === 3) {
            return "<span class=\"label label-default\">已取消</span>";
        } else {
            return "<span class=\"label label-danger\">订单状态错误</span>";
        }
    }

    function trans_to_order_good_status_span(num) {
        if (num === 0) {
            return "<span class=\"label label-warning\" style=\"line-height: 80px\">未支付</span>";
        } else if (num === 1) {
            return "<span class=\"label label-primary\" style=\"line-height: 80px\">待发货</span>";
        } else if (num === 2) {
            return "<span class=\"label label-primary\" style=\"line-height: 80px\">已发货</span>";
        } else if (num === 3) {
            return "<span class=\"label label-cyan\" style=\"line-height: 80px\">待评论</span>";
        } else if (num === 4) {
            return "<span class=\"label label-cyan\" style=\"line-height: 80px\">已评论</span>";
        } else if (num === 5) {
            return "<span class=\"label label-default\" style=\"line-height: 80px\">已退款</span>";
        } else {
            return "<span class=\"label label-danger\" style=\"line-height: 80px\">订单状态错误</span>";
        }
    }
</script>
